<template>
  <div>
    <h1>ref</h1>
    <ul>
      <li ref="liOneRef">这是第一个li元素</li>
    </ul>
    <child-com ref="childRef"></child-com>
    <button @click="childAaa11">获取子组件的数据</button>
    <ul>
      <li :ref="getList" v-for="index in 10" :key="index">
        这是第{{ index }}li
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import ChildCom from "./components/ChildCom.vue";

export default defineComponent({
  components: { ChildCom },
  setup() {
    const liOneRef = ref<HTMLElement | null>();
    const childRef = ref<InstanceType<typeof ChildCom>>();

    const childAaa11 = () => {
      console.log(childRef.value?.childAaa);
      console.log(childRef.value?.aa);
    };

    const getDOM: HTMLElement[] = [];
    const getList = (el: HTMLElement) => {
      getDOM.push(el);
    };
    console.log(getDOM);
    return {
      liOneRef,
      childRef,
      childAaa11,
      getList,
    };
  },
  mounted() {
  },
});
</script>

<style scoped>
</style>